<template>
  <h1>'toref'的name:{{ name }}</h1>
  <h1>'ref'的name:{{ name1 }}</h1>
  <h1>age:{{ age }}</h1>
  <h1>salary:{{ salary }}</h1>
  <h1>type:{{ type }}</h1>
  <h2>person:{{ person }}</h2>
  <button @click="name=name+'!'">修改toref的姓名</button>
  <button @click="name1=name1+'!'">修改ref的姓名</button>
  <button @click="age=age+1">加年龄</button>
  <button @click="salary+=10">涨薪</button>
</template>

<script>

import {reactive, ref, toRef} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    let person = reactive({
      name: '曾宇杰',
      age: 18,
      job: {
        type: '前端',
        salary: 20
      }
    })

    const name1 = person.name //这样子拿到的不是没有响应式的,只是将person.name这个字符产给name1
    let name2 = toRef(person, 'name') //这样拿到的数据是有响应式的
    console.log('###没有使用toRef', name1)
    console.log('###使用了toRef', name2)
    return { //使用toRef是为了在模板中直接使用salary,而不是person.job.salary
      // name: toRef(person, 'name'),
      // age: toRef(person, 'age'),
      // type: toRef(person.job, 'type'),
      // salary: toRef(person.job, 'salary'),
      name1: ref(person.name),//这样修改的name1不是person.name
      ...toRef(person),//将对象拆了之后展开
      ...toRef(person.job),
      person,
    }
  },

}
</script>

<style>
</style>
